<template>

    <div class="layout">
        <!-- 左部分 -->
        <div class="layout_fl">
            <div class="logo">LOGO</div>
            <div class="menu">
                <dl class="menu_item">
                    <dt @click="changeMenuSHow"><img src="@/assets/images/tag.png" />系统管理</dt>
                    <template v-if="childMenuShow">
                        <dd v-for="m in menus"><img src="@/assets/images/tag.png" /><router-link :to="m.href">{{ m.name }}</router-link></dd>
                    </template>
                </dl>
            </div>
        </div>
        <!-- 右部分 -->
        <div class="layout_fr">
            <div class="header">
                <div class="crumb">
                    <span>首页</span>
                    <span class="line">/</span>
                    <span>系统管理</span>
                    <span class="line">/</span>
                    <span>用户管理</span>
                </div>
                <div class="user">
                    <img src="@/assets/images/head.png" alt="">
                    <div>张三</div>
                </div>
            </div>
            <div class="layout_container">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data:()=>{
        return {
            menus:[
                {
                    href:"/about",
                    name:"关于我们"
                },
                {
                    href:"/contact",
                    name:"联系我们"
                }
            ],
            childMenuShow:false
        }
    },
    methods:{
        changeMenuSHow(){
            this.childMenuShow = !this.childMenuShow
        }
    }
}
</script>
<style lang="scss">
.layout{
    height: 100%;
    display: flex;
    .logo{
        height:50px;
        line-height: 50px;
        text-align: center;
        color: #ffffff;
    }
    .header{
        height:50px;
        line-height: 50px;
        border-bottom: 1px solid #f1f1f1;
    }
}
.layout_fl{
    background-color: #304156;
    width: 200px;
}
.layout_fl .menu .menu_item{
    color: #ffffff;
}
.layout_fl .menu .menu_item dt:hover{
    background-color: #2d3d51;
}
.layout_fl .menu .menu_item dd{
    background:#304156;
}

.layout_fl .menu .menu_item dt{
    padding-left: 16px;
}
.layout_fl .menu .menu_item dd{
    padding-left: 32px;
}

.layout_fl .menu .menu_item dt,.layout_fl .menu .menu_item dd{
    cursor: pointer;
    height: 48px;
    line-height: 48px;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.layout_fl .menu .menu_item dt img,.layout_fl .menu .menu_item dd img{
    width: 16px;
    height: 16px;
    margin-right: 4px;
}

.layout_fl .menu .menu_item dt,.layout_fl .menu .menu_item dd a{
    color: #ffffff;
    text-decoration: none;
}

.layout_fl .menu .menu_item dd{
    background-color: #1f2d3d;
}

.layout_fl .menu .menu_item dd:hover{
    background-color: #001528;
}

.layout_fr{
    flex: 1;
}
.layout_fr .header{
    display: flex;
    justify-content: space-between;
    padding: 0 14px;
}
.layout_fr .header .crumb{
    color: #304156;
}
.layout_fr .header .crumb span{
    margin-right: 4px;
}
.layout_fr .header .crumb span.line{
    color: #e1e1e1;
}
.layout_fr .header .crumb span:last-child{
    color: #999999;
}
.layout_fr .header .user{
    display: flex;
    align-items: center;
}
.layout_fr .header .user img{
    width: 36px;
    height: 36px;
    border-radius: 18px;
    margin-right: 8px;
}
</style>